<h1>Performance Demo at {{ currentDate }}</h1>

<!-- <h3>{{ skill.name }} -- {{ getSkillRate(skill) }}</h3> -->

<h3>{{ skillView?.name }} -- {{ skillView?.rate }}</h3>

<button (click)="doNothing()">Click me</button>

<hr>

<app-child [name]="skillView.name"></app-child>

<!-- Don't pass big object
<app-child [skill]="skillView"></app-child> -->

<hr>

<!-- <svg width="500"
  height="500"
  (mousedown)="mouseDown($event)"
  (mousemove)="mouseMove($event)"
  (mouseup)="mouseUp($event)">
  <svg:g app-box
    *ngFor="let box of boxes"
    [box]="box"
    [selected]="box.id == currentId">
  </svg:g>
</svg> -->

<hr>

<button (click)="reset()">reset item</button>
<button (click)="change()">change item</button>

<ul>
  <li *ngFor="let b of items"> {{ b.name }}</li>
</ul>

<ul>
  <li *ngFor="let b of items; trackBy: trackById"> {{ b.name }}</li>
</ul>
